<template>
	<view>
		<TopNav title="苗种放养"></TopNav>
		<SearchMenu @search="handleSearch" @reset="handleSearch" @sort="handleSort">
			<template v-slot:search>
				<van-cell title="塘口名称">
					<van-field v-model="queryParams.culturePondName" placeholder="输入塘口名称查询" :border="false"
						input-align="right" class="padding-none" />
				</van-cell>
			</template>
		</SearchMenu>

		<view class="cu-card case">
			<view class="cu-item shadow padding flex" v-for="item in list" :key="item.id" @click="handleToDetail(item)">
				<view class="flex justify-between align-baseline">
					<view class="full-width overflow-hidden padding-right-xs">
						<view class="flex justify-between text-cut">
							<text class="text-bold text-xl">{{item.culturePondName}}</text>
							<text class="shrink-0 text-grey">{{item.createTime}}</text>
						</view>
						<view class="flex justify-between align-end">
							<view class="basis-df">
								<text class="text-gray text-width">苗种：</text>
								<text>{{item.offspringSeedName || '-'}}</text>
							</view>
							<view class="basis-df">
								<text class="text-gray text-width">数量：</text>
								<text>{{item.breedQuantity || '-'}} {{item.breedQuantityUnit || ''}}</text>
							</view>
						</view>
					</view>
					<view class="padding-xs shrink-0">
						<image :src="baseUrl + item.createUserAvatar" mode="widthFix"
							class="cu-avatar sm radius bg-transparent">
						</image>
						<view class="text-xs">{{item.createUsername || '-'}}</view>
					</view>
				</view>


			</view>
		</view>
		<u-loadmore :status="loadStatus" @loadmore="getMoreList" v-if="list.length" />
		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-xl' plain hairline type="info" @click="handleToEdit">新增记录</van-button>
		</view>
		<van-empty description="暂无数据" v-if="!list.length" />
	</view>
</template>

<script>
	import {
		list
	} from "@/api/work/breeding"
	import mixins from "@/mixins"
	export default {
		mixins: [mixins],
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				list: [],
				loadStatus: 'loadmore',
				queryParams: {
					startDate: '',
					endDate: '',
					culturePondName: '',
					pageSize: 10,
					pageNum: 1
				},

			};
		},
		onShow() {
			this.queryParams.productionBaseId = this.$store.state.user.baseInfo.id
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus === 'nomore') return
			this.queryParams.pageNum += 1
			this.getList()
		},
		methods: {
			getList() {
				list(this.queryParams).then(res => {
					this.listFormat(res)
				})
			},
			getMoreList() {
				this.queryParams.pageNum += 1
				this.getList()
			},

			handleToDetail(obj) {
				this.$tab.navigateTo('./detail?id=' + obj.id)
			},
			handleToEdit() {
				this.$tab.navigateTo('./edit')
			},
			handleReset(query) {
				this.queryParams = {
					...this.queryParams,
					...query,
					culturePondName: '',
					pageNum: 1
				}
				this.getList()
			},
			handleSearch(query) {
				this.queryParams = {
					...this.queryParams,
					...query,
					pageNum: 1
				}
				this.getList()
			},
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>
<style lang="scss" scoped>

	.text-width {
		width: 45px;
		display: inline-block;
	}
</style>